<template>
<view class="swiper">
   
        <swiper
            :style="{'height':height+'rpx'}"
            :indicator-dots="indicatorDots"
            :indicator-color="indicatorColor"
            :indicator-active-color="indicatorActiveColor"
            :autoplay="autoplay"
            :interval="interval"
            circular="true"
            next-margin="70rpx"
            previous-margin	="70rpx"
            @change="durationChange">
      
         

          
                <swiper-item  v-for="(item,index) in newImag" :key="index" style="text-align: center;background:#fff" > 
                  
                      <image 
                         @tap="toDetail(item)"
                          
                          mode="aspectFill" 
                          :src="item.bannerImage" 
                          :style="{height:height+'rpx',width:width+'rpx'}"
                          :class="{'act':current==index}" />    

                     

                </swiper-item>
          

        </swiper>
      
</view>        
</template>
<script lang="ts">

 import adlink from '@/mixins/adLink'
 import {Vue, Prop , Component} from 'vue-property-decorator';


 @Component({})
 export default class extends adlink {

    indicatorDots:boolean = false;
    autoplay:boolean = true;
    indicatorColor:string = 'rgba(255,255,255,0,4)';
    indicatorActiveColor:string = '#fff';
    interval:number = 5000;
    current:any = 0;

     @Prop({type:String,default:'300'}) height!:string;
     @Prop({type:Array,default:[1,2,3]}) images!:Array<any>;
     @Prop({type:String,default:'100%'}) width!:string;
     

  
     get newImag(){
           
           console.log(this.images)
            return this.images;
     }
    
   toDetail(d:any){
            
                let {bannerUrl} = d;
                if(bannerUrl){
                        uni.navigateTo({
                                url:`/detailPackages/pages/beautyDetail/index?cid=${bannerUrl}`
                        })
                }
   }
     
     
 
   
    durationChange(e:any){
           
            this.current = Number(e.detail.current)
    }
     
    
   
     

   
    
 }   
</script>

<style lang="scss">
.swiper{
    
overflow: hidden;

    position: relative;
    z-index: 2;
    border-radius: 20rpx;
    margin-bottom: 30rpx;

        swiper-item{
             text-align: center;   
        }
          image{
                width: 100%;
                transform: scale(0.9);  
                transition: transform 0.3s linear 0s;   
                display: block;
                margin: 0 auto;   
                 border-radius: 20rpx;
               
         }
         .act{
               transform: scale(1);  
         }
}
   
</style>